<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <script src="//api.map.baidu.com/api?type=webgl&v=1.0&ak=vcIxXMSnVCnvssYRwp1KYnBdX95LTo4Y"></script>

</head>

<body class="df fcolumn ">
    <div class="overflow rel">
        <div class="container flex">
            <header class="runHeader">
            </header>
            <!-- 数字部分 -->
            <div>
                <div class="run-top">
                    <p>目前积累跑步距离:</p>
                    <p class="run-topnum"><span>999.999</span>公里</p>
                </div>
            </div>
            <!-- 主要内容 -->
            <main class="flex rel">
                <!-- 三个定位 -->
                <div class="df run-txt abs">
                    <p>户外跑</p>
                    <p class="run-txtone">燃脂跑</p>
                    <p>跑步机</p>
                </div>

                <!-- go -->
                <a href="#" class="run-go abs">
                    <span>GO</span>
                </a>


                <!-- 下面图标 -->
                <div class="df run-font abs">
                    <p class="iconfont icon-shezhi" id="run-fontone"></p>
                    <p id="run-fonttwo">设置目标</p>
                    <p class="iconfont icon-yinle" id="run-fontone"></p>
                </div>
            </main>
        </div>
        <!-- 跑步路线 -->
        <div class="run df abs">
            <div class="df jcb run-bottom container">
                <div>
                    <p>跑步路线</p>
                    <p class="bottom-one f12">使用跑步路线，邂逅附近的同行者</p>
                </div>
                <span class="iconfont icon-shezhi-youjiantou"></span>
            </div>
        </div>


        <!-- 设置固定宽度和高度盒子来显示地图 -->
        <div id="tu"></div>

    </div>
    <!-- 页脚 -->
    <footer class="footerAll">
    </footer>

</body>

</html>